@charset "utf-8";
@top-color-dark:#013162;
@top-color-light:#0D4C99;
@font-family:"微软雅黑", arial, helvetica, sans-serif;
@width360:360px;
@width640:640px;
@width720:720px;
@width1440:1440px;
table,thead,
        tbody,
        tfoot,
        tr,
        td,
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,ul,ol,li {
            padding: 0;
            margin: 0;
            border: 0 none;
        }
        ul,li{
        	list-style: none;
        	list-style-type: none;
        }
        html,
        body {
            width: 100%;
            height: 100%;
            border: 0 none;
            margin: 0;
            padding: 0;
            font-family:@font-family;
        }
        /*滚动条*/
        ::-webkit-scrollbar {  
		    width:6px;
		    height:6px;
		}
		
		::-webkit-scrollbar-track,
		::-webkit-scrollbar-track-piece{
			background-color: #777;
			box-shadow: inset 0 0 3px rgba(0,0,0,0.3); 
    		border-radius: 6px;
		}
		
		::-webkit-scrollbar-thumb {  
			border-radius: 6px;
	    	background-color: #222;
		}
        /* 360-639px */
        .container {
            height: 100%;
            width: 100%;
            /*overflow-x: hidden;*/
        }
        .header {
            width: 100%;                
            height: 60px;
            background-image: -webkit-linear-gradient(top,@top-color-dark,@top-color-light);
            background-image: linear-gradient(to bottom, @top-color-dark, @top-color-light);
        img.logo {              
            height: 100%;
            background-color: red;
            float: left;
        }
        .title {
            float: left;
            color: #fff;
            min-width: 100px;
            height: 100%;
        }
        .title p{
            margin-top: 20px;
        }
        }
        .headerwrap{
            width: 100%;
            min-width:248px;
            height: 100%;
            margin: 0 auto;
        }
        .navbtn{
            position: relative;
            top: 8px;
            right: 15px;
            width: 48px;
            max-width: 12%;
            float: right;
        }
        #navbtn{
            color:#ADC1F4;
        }
        .leftnav{
            width: 100%;
            background-color: #aaa;
            display: none;
            a{
            	color:#222222;
            	font-weight: 700;
            	
            	&:link{
            	text-decoration:none;
            	}
            	
				&:visited{
					
				}
				
				&:hover{
					color:#013162;					
				}
				
				&:active{
					
				}
            	
            }
        }
        .main {
            *height: 100%;
            width: 100%;
            min-width:248px;
            background-color: #ccc;
           	.found{
				width:100%;
			}
			.lost{
				width:100%;
			}
        }
        .footer {
            width: 100%;
            min-width:248px;
            height: 30px;
            background-color: #333;
            color:white;
        }
        
        /* 优先考虑移动设备，然后对大屏幕进行优化  大于等于640的 */
        @media all and (min-width: @width640) { 
            .header .title {
                margin-left: 10%;
            }
            .headerwrap{
                width: 100% - 15% - 15%;/**/
            }
            .navbtn{
                display: none;
            }
            .leftnav {
                width: 15%;/**/
                float: left;
                display: block;
            }
            .main{
                margin-left: 15%;/**/
               	width: 100% - 15%;
            }
            .footer{
                text-align: center;
            }
        }
        
        /* 大于等于720的 宽度、间距适当改变 百分比变小 */
        @media all and (min-width: @width720 ) {
            .headerwrap{
                width: 100% - 13.5% - 13.5%;
            }
            .leftnav {
                width: 13.5%;
            }
            .main{
                margin-left: 13.5%;
                width: 100% - 13.5%;
            }
        }
        /* 大于等于1440的 宽度、间距适当改变 百分比变小 */
        @media all and (min-width: @width1440 ) {
            .headerwrap{
                width: 100% - 9% - 9%;
            }
            .leftnav {
                width: 9%;
            }
            .main{
                margin-left: 9%;
                width: 100% - 9%;
            }
        }
        
        
        /*超小视口 iphone4系列 优化*/
        @media all and (max-width: (@width360 - 1)) {
            .header  {
            	img.logo{
                display:none;
            	}
            	.title p{
            		&::before{
		                content:"天津师范大学";
            		}
            		&:before{
		                content:"天津师范大学";
            		}
            	}
            }
        }